<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>文字无缝滚动</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #wrapper {
        overflow: hidden;
        height: 30px;
        width: 500px;
        background: #ccc;
        color: #006600;
        margin: 100px auto;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id="wrapper">
      <div id="demo1">
        <p>恭喜 手机号为176****5610 的用户喜获 100元 现金券</p>
        <p>恭喜 手机号为176****5610 的用户喜获 100元 现金券</p>
        <p>恭喜 手机号为176****5610 的用户喜获 100元 现金券</p>
        <p>恭喜 手机号为176****5610 的用户喜获 100元 现金券</p>
        <p>恭喜 手机号为176****5610 的用户喜获 100元 现金券</p>
        <p>恭喜 手机号为176****5610 的用户喜获 100元 现金券</p>
        <p>恭喜 手机号为176****5610 的用户喜获 100元 现金券</p>
        <p>恭喜 手机号为176****5610 的用户喜获 100元 现金券</p>
        <p>恭喜 手机号为176****5610 的用户喜获 100元 现金券</p>
        <p>恭喜 手机号为176****5610 的用户喜获 100元 现金券</p>
        <p>恭喜 手机号为176****5610 的用户喜获 100元 现金券</p>
        <p>恭喜 手机号为176****5610 的用户喜获 100元 现金券</p>
        <p>恭喜 手机号为176****5610 的用户喜获 100元 现金券</p>
        <p>恭喜 手机号为176****5610 的用户喜获 100元 现金券</p>
      </div>
      <div id="demo2"></div>
    </div>
  </body>
</html>
<script>
  window.onload = function () {
    // alert("000");
    var speed = 80; // 可自行设置文字滚动的速度

    var wrapper = document.getElementById("wrapper");
    var demo1 = document.getElementById("demo1");
    var demo2 = document.getElementById("demo2");

    demo2.innerHTML = demo1.innerHTML; //克隆demo1为demo2
    function Marquee() {
      if (demo2.offsetHeight - wrapper.scrollTop <= 0)
        //当滚动至demo1与demo2交界时
        wrapper.scrollTop -= demo1.offsetHeight;
      //demo跳到最顶端
      else {
        wrapper.scrollTop++; //如果是横向的 将 所有的 height top 改成 width left
      }
    }

    var MyMar = setInterval(Marquee, speed); //设置定时器
    wrapper.onmouseenter = function () {
      // alert("00");
      //   console.log("0000");
      clearInterval(MyMar);
    };
    //鼠标移上时清除定时器达到滚动停止的目的
    wrapper.onmouseleave = function () {
      MyMar = setInterval(Marquee, speed);
      // clearInterval(MyMar);
    };
    //鼠标移开时重设定时器
  };
</script>
